import React, {Component} from 'react';
import {connect} from 'react-redux';

import {getInputChangeAction, getTodoAddAction, getTodoDelAction, getTodoList} from './store/createActions';
import {Button, Input, List} from "antd";

class TodoList extends Component {
  componentDidMount() {
    this.props.getTodoList();
  }

  render() {
    const {inputValue, list, handleInputChange, handleBtnSubmit, handleItemDel} = this.props;

    return (
      <div style={{'marginTop': '30px', 'marginLeft': '30px'}}>
        <Input
          value={inputValue}
          placeholder='请输入代办项'
          onChange={handleInputChange}
          style={{width: '300px', 'marginRight': '10px'}}/>
        <Button type="primary" onClick={handleBtnSubmit}>提交</Button>

        <List
          style={{width: '300px', 'marginTop': '10px'}}
          bordered
          dataSource={list}
          renderItem={(item, index) => (<List.Item onClick={() => {handleItemDel(index)}}>{item}</List.Item>)}
        />
      </div>
    );
  }

}

const mapStateToProps = (state) => {
  return {
    inputValue: state.inputValue,
    list: state.list
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    handleInputChange: (e) =>{
      const action = getInputChangeAction(e.target.value);
      dispatch(action);
    },

    handleBtnSubmit: () => {
      const action = getTodoAddAction();
      dispatch(action);
    },

    handleItemDel: (index) => {
      const action = getTodoDelAction(index);
      dispatch(action);
    },

    getTodoList: () => {
      const action = getTodoList();
      dispatch(action);
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);